<template>
	<view>
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view style="margin-top: -184rpx;margin-left: 280rpx;position: absolute;">
			<picker @change="termsChange" :value="term" :range="terms">
				<view class="uni-input" style="font-size: 38rpx; font-weight: 500;">{{term}}</view>
			</picker>
		</view>
		<!-- 输入框 -->
		<view style="position: absolute;margin-top: -104rpx;">
			<text style="font-weight: 600;font-size: 24rpx;">专业:</text>
			<picker @change="mnamePickerChange" :value="mname" :range="mnames"
				style="display: inline-block; padding-left: 6rpx; width: 164rpx;">
				<input placeholder="请选择" disabled="true" v-model="mname"
					style="width: 322rpx;position: relative;display: flex; font-size: 27rpx;" />
			</picker>
		<uni-icons class="clear-icon" v-if="mname" @click="clearSelection" type="clear"></uni-icons>			
		<text style="font-weight: 600;padding-left: 112rpx; font-size: 27rpx;">年级:</text>
			<picker @change="yearsPickerChange" :value="year" :range="years"
				style="display: inline-block; padding-left: 20rpx; font-size: 27rpx;">
				<input placeholder="请选择" disabled="true" v-model="year"
					style="position: relative;display: flex;width: 88rpx;font-size: 27rpx;" />
			</picker>
			<text style="font-weight: 600;padding-left: -5rpx;font-size: 27rpx;">班级:</text>
			<picker @change="cnamesPickerChange" :value="cname" :range="cnames"
				style="display: inline-block; padding-left: 15rpx;">
				<input placeholder="请选择" disabled="true" v-model="cname"
					style="display: flex;position: relative;width: 144rpx;font-size: 27rpx;" />
			</picker>
		</view>
		<view style="position: absolute;margin-top: -26rpx;">
			教师工作量
		</view>
		<view class="charts-box">
			<!-- <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" /> -->
			<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
		</view>
		<view @click="open" v-if="ScoreStatus">
			点我查看详情>>>
		</view>
		<view v-if="status">
			<qiun-data-charts type="ring" :opts="Stuopts" :chartData="StuchartData" />
		</view>
		<uni-popup ref="popup" :mask-click="true" style="height: 600rpx;width: 500rpx;">
			<u-list height="1400rpx" @scrolltolower="scrolltolower"><!--  滑动到底部触发的事件-->
				<u-list-item v-for="(item, index) in indexList.data" :key="index">
					<view style="background-color: whitesmoke;">
					<text>辅导员工号:{{item.counselor}}</text>
					<text>学号:{{item.stuid}}</text>
					<text>姓名:{{item.sname}}</text>
					<text>已到:{{item.arrived}}</text>
					<text>请假:{{item.leave_ask}}</text>
					<text>早退:{{item.leave_early}}</text>
					<text>迟到:{{item.be_late}}</text>
					<text>旷课:{{item.absenteeism}}</text>
					</view>
				</u-list-item>
			</u-list>
		</uni-popup>
	</view>
</template>

<!-- 考勤统计 -->
<script>
	import {
		$request
	} from '../../../common/uni_request.js'
	import {
		HNIT_URL
	} from '../../../constants/index.js';
	import {
		resolveDynamicComponent
	} from "vue";
	import {
		data
	} from '../../../uni_modules/uview-ui/libs/mixin/mixin.js';
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#0000FF", "#70DB93", "#D9D919",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 10,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				index: 0,
				//选中的学期
				term: '',
				//学期下拉框
				terms: [],
				//选中的专业
				mname: "",
				//专业的下拉框
				mnames: [],
				//选中的年级
				year: "",
				//年级下拉框
				years: [],
				//选中的班级
				cname: "",
				//班级的下拉框
				cnames: [],
				//存储查询出来的教师信息
				Teadata: [],
				//学生分数比例
				StuScore: [],
				StuchartData: {},
				//查看详细的状态
				ScoreStatus: false,
				//学生柱状图的状态
				status: false,
				indexList:[],
				page:1,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				Stuopts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "学生分数比例",
						fontSize: 10,
						color: "#666666"
					},
					subtitle: {
						name: "详细",
						fontSize: 10,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		onLoad() {
			this.queryTerm().then(() => {
				this.queryAllyear().then(() => {
					this.getServerData();
				});
			});
			this.selectClass();
			this.queryMname();
			this.queryYearnumber();
			this.queryAllTerm();
		},
		methods: {
			//画饼图
			getServerData() {
				this.chartData = {}
				let data = this.Teadata;
				let chartdata = [];
				for (let key in data) {
					chartdata.push({
						name: data[key].nickname,
						value: data[key].total,
						labelText: `${data[key].nickname}:${data[key].total}节`
					});
				}
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: chartdata,
							label: {
								show: false // 隐藏标签（即点对应的名字）
							}
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 1500);
			},
			//画学生柱状图
			getServerStuData() {
				//模拟从服务器获取数据时的延时
				this.StuchartData = {}
				this.status = true
				let data = this.StuScore
				let chartdata = [];
				for (let key in data) {
					chartdata.push({
						name: key,
						value: data[key],
					});
				}
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: chartdata
						}]
					};
					this.StuchartData = JSON.parse(JSON.stringify(res));
					this.ScoreStatus = true
				}, 1500);

			},
			//返回主页
			back() {
				uni.reLaunch({
					url: "../home/index"
				})
			},
			//学期变化时间
			termsChange(e) {
				this.term = this.terms[e.detail.value]
				this.queryAllyear().then(() => {
					this.getServerData();
				});
			},
			//专业变化事件
			mnamePickerChange(e) {
				this.mname = this.mnames[e.detail.value]
				this.selectClass();
				this.queryAllyear().then(() => {
					this.getServerData();
				});
			},
			//年级变化
			yearsPickerChange(e) {
				this.year = this.years[e.detail.value];
				this.selectClass();
				this.queryAllyear().then(() => {
					this.getServerData();
				});
			},
			//班级变化
			cnamesPickerChange(e) {
				this.cname = this.cnames[e.detail.value]
				this.queryAllyear().then(() => {
					this.getServerData();
				});
				this.selectproportion();
			},
			//查今天在哪个学期
			queryTerm() {
				var currentDate = new Date();
				// 获取当前年份
				var currentYear = currentDate.getFullYear();
				// 获取当前月份
				var currentMonth = currentDate.getMonth() + 1;
				// 获取当前日期（天）
				var currentDay = currentDate.getDate();
				// 格式化当前日期
				// let nowdays = currentYear + '-' + this.addZero(currentMonth) + '-' + this.addZero(currentDay);
				let nowdays = '2023-10-19';
				let params = {
					time: nowdays
				}
				return this.$request.post(HNIT_URL + "wx/queryTerm", params).then(res => {
					this.term = res.data.school_year
				})
			},
			// 添加补0函数
			addZero(num) {
				return num < 10 ? '0' + num : num;
			},
			//查询教师所对应的课程数
			queryAllyear() {
				let params = {
					school_year: this.term,
					mname: this.mname,
					yearnumber: this.year,
					cname: this.cname
				}
				return this.$request.post(HNIT_URL + "wx/selectByteaYear", params).then(res => {
					this.Teadata = res.data
				});
			},
			//查询班级
			selectClass() {
				let params = {
					mname: this.mname,
					yearnumber: this.year,
				}
				this.$request.post(HNIT_URL + "wx/selectClass", params).then(res => {
					this.cnames = res.data
				})
			},
			//查询专业
			queryMname() {
				let params = {}
				this.$request.post(HNIT_URL + "wx/queryMname", params).then(res => {
					this.mnames = res.data
				})
			},
			//查年级
			queryYearnumber() {
				let params = {}
				this.$request.post(HNIT_URL + "wx/queryYearnumber", params).then(res => {
					this.years = res.data
				})
			},
			queryAllTerm() {
				let params = {}
				this.$request.post(HNIT_URL + "wx/queryTerms", params).then(res => {
					this.terms = res.data
				})
			},
			selectproportion() {

				let params = {
					cname: this.cname
				}
				this.$request.post(HNIT_URL + "wx/selectproportion", params).then(res => {
					const keys = Object.keys(res.data);
					const keyLengths = {};
					// 计算每个键的长度并存储在 keyLengths 对象中
					keys.forEach(key => {
						keyLengths[key] = res.data[key].length;
					});
					this.StuScore = keyLengths;
					this.getServerStuData();
				})
			},
			open() {
				this.$refs.popup.open('center')
				let params={
					pageSize:10,
					pageNum:this.page,
					cname:this.cname,
					majorName:this.mname
				}
				this.$request.post(HNIT_URL+"wx/selectBystuSum",params).then(res=>{
					this.indexList=res.data
				})
			},
			//滑动底部加载事件
			scrolltolower() {
				this.page = this.page + 1
				let params = {
					pageSize:10,
					pageNum: this.page,
					cname:this.cname,
					majorName:this.mname
				}
				this.$request.post(HNIT_URL + "wx/selectBystuSum", params).then(res => {
					if (Object.keys(res.data).length == 0) {
						uni.showToast({
							icon: "none",
							title: "已经到底了"
						})
					} else {
						this.indexList =res.data
					}
			
				})
			},
			
			close() {
				this.$refs.popup.close()
			},
			 clearSelection() {
			      this.mname = ""; // 清空选择器的值
			    }
		}

	}
</script>

<style lang="scss">
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		position: fixed;
		width: 80rpx;
		margin-top: -210rpx;
		height: 55rpx;
		margin-left: 20rpx;
		border-radius: 80rpx;
		background-color: white;
		border: 1rpx #c6c6c6 solid;
	}

	.charts-box {
		// position: absolute;
		margin-top: 350rpx;
		width: 100%;
		height: 350px;
	}
	   .clear-icon {
	     position: absolute;
	     top: 50%;
	     right: 10px;
	     transform: translateY(-50%);
	     font-size: 24px;
	     cursor: pointer;
		 padding-right: 352rpx;
		 padding-bottom: 11rpx;
	   }
</style>